<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>峰聊</title>
    <link rel="stylesheet" href="static/lib/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="static/lib/layer/theme/default/layer.css">
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>

<div id="app">
    <!-- 聊天窗口 -->
    <div v-if="user.id > 0" class="chat_form">
        <!-- 标题栏 -->
        <div class="title">
            <span>峰凌聊天室</span>

            <ul>
                <li><i class="fas fa-minus"></i></li>
                <li><i class="far fa-square"></i></li>
                <li><span>X</span></li>
            </ul>
        </div>

        <!-- 菜单栏 -->
        <ul class="menus">
            <li class="active"><span>聊天</span></li>
            <li><span>公告</span></li>
            <li><span>相册</span></li>
            <li><span>文件</span></li>
            <li><span>活动</span></li>
        </ul>

        <!-- 主窗口 -->
        <div class="main">
            <!-- 聊天窗口 -->
            <div class="chat">
                <!-- 消息列表 -->
                <ul class="message_list">
                    <li v-for="m in chatForm.messageList">
                        <div class="title">
                            <span class="username" v-text="m.username"></span>
                            <span class="time" v-text="m.time"></span>
                        </div>
                        <div class="content">
                            <p v-text="m.content"></p>
                        </div>
                    </li>
                </ul>

                <!-- 聊天输入区域 -->
                <div class="chat_area">
                    <ul class="tools">
                        <li>
                            <span><i class="far fa-smile"></i></span>
                        </li>
                        <li>
                            <span><i class="fas fa-video"></i></span>
                        </li>
                        <li>
                            <span><i class="fas fa-image"></i></span>
                        </li>
                        <li>
                            <span><i class="fas fa-music"></i></span>
                        </li>
                    </ul>
                    <textarea class="text_input" v-model="chatForm.content"></textarea>
                    <div class="actions">
                        <button type="button">关闭</button>
                        <button class="blue" type="button" @click="send()">发送</button>
                    </div>
                </div>
            </div>

            <!-- 用户列表 -->
            <div class="members">
                <div class="title">
                    <label>群成员</label>
                    <span v-text="chatForm.online"></span>
                    <span>/</span>
                    <span v-text="chatForm.memberList.length"></span>
                </div>
                <ul class="member_list">
                    <li v-for="m in chatForm.memberList">
                        <img :src="m.avatar" />
                        <span v-text="m.username"></span>
                        <i v-if="m.isAdmin" class="fas fa-user"></i>
                    </li>

                </ul>
            </div>

        </div>

    </div>

    <!-- 登录窗口 -->
    <div v-else class="login_form">
        <!-- 头部背景 -->
        <div class="login_bg"></div>

        <!-- 标题栏 -->
        <div class="title">
            <div class="left">
                <i class="fab fa-qq"></i>
                <span>QQ</span>
            </div>
            <div class="right">
                <span>-</span>
                <span class="red">x</span>
            </div>
        </div>

        <!-- 头像图片 -->
        <div class="avatar">
            <img src="static/img/a.jpg">
        </div>

        <!-- 登录表单 -->
        <form>
            <div class="field">
                <i class="fab fa-qq"></i>
                <input type="text" v-model="loginForm.username" placeholder="QQ号/手机/邮箱">
            </div>
            <div class="field">
                <i class="fas fa-lock"></i>
                <input type="password" v-model="loginForm.password" placeholder="密码">
            </div>
            <div class="actions">
                <button type="button" class="blue" @click="login()">登录</button>
                <button type="button">注册</button>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" src="static/lib/vue.min.js"></script>
<script type="text/javascript" src="static/lib/jquery.min.js"></script>
<script type="text/javascript" src="static/lib/layer/layer.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
</html>